<template>
	<view class="bef7 f30 pb140">
		<u-notice-bar text="提交审核，请注意：1、须在报名时间内"></u-notice-bar>
		<view class="" style="padding: 20rpx 50rpx;">
			<view class="w100 cf">
				<view class="p3" style="background: #0F56B9;border-radius: 16rpx 16rpx 0 0;">
					<view class="f32 wei f-y-c">
						<image src="/static/newYdsg/basketball-icon.png" style="width: 60rpx;height: 60rpx;"></image>
						<text class="ml20">{{detailObj.contestName}}</text>
					</view>
					<view v-if="!showMore" class="bs40 t-c f24" @click="showMore=!showMore"
						style="margin: 20rpx auto 0;border: 1rpx solid #82A7D9;width: 150rpx;">
						更多信息
					</view>
				</view>
				<view class="p3" style="background: #0F56B9;" v-if="showMore" @click="showMore=!showMore">
					<view class="">
						<view class="flex mb30">
							<view class="cf mr10"><u-icon name="clock" size="16" color="#fff"></u-icon></view>
							<view class="">
								<view class="mb20" style="color: #82A7D9;">比赛时间</view>
								<view class="">{{detailObj.contestBeginTime }} 至 {{detailObj.contestEndTime}}</view>
							</view>
						</view>
						<view class="flex mb30">
							<view class="cf mr10"><u-icon name="calendar" size="16" color="#fff"></u-icon></view>
							<view class="">
								<view class="mb20" style="color: #82A7D9;">报名时间</view>
								<view class="">{{detailObj.signStartTime }} 至 {{detailObj.signEndTime}}</view>
							</view>
						</view>
						<view class="flex mb30">
							<view class="cf mr10"><u-icon name="pushpin" size="16" color="#fff"></u-icon></view>
							<view class="">
								<view class="mb20" style="color: #82A7D9;">比赛地点</view>
								<view class="">{{detailObj.area }}</view>
							</view>
						</view>
						<view class="flex mb30">
							<view class="cf mr10"><u-icon name="account" size="16" color="#fff"></u-icon></view>
							<view class="">
								<view class="mb20" style="color: #82A7D9;">联系人</view>
								<view class="flex1 f-s-c">
									<text>{{detailObj.personName }}</text>
									<a :href="`tel:${detailObj.personPhone}`" class="flex c0"
										style="text-decoration: none;">
										<text class="mr20 cf">{{detailObj.personPhone }}</text>
										<u-icon name="phone" size="16" color="#fff"></u-icon>
									</a>

								</view>
							</view>
						</view>
						<view class="flex mb30">
							<view class="cf mr10"><u-icon name="rmb-circle" size="16" color="#fff"></u-icon></view>
							<view class="">
								<view class="mb20" style="color: #82A7D9;">报名费</view>
								<view class="flex1">球员{{detailObj.playerExpenses }}元/人；
									教练{{detailObj.coachExpenses }}元/人
								</view>
							</view>
						</view>
					</view>
					<view class="bs40 t-c f24" style="margin: 20rpx auto 0;border: 1rpx solid #fff;width: 150rpx;">
						收起信息
					</view>
				</view>
				<view class="p3 c0" style="background: #fff;border-radius: 0 0 16rpx 16rpx;">
					<view class="f-s-c">
						<view class="f-y-c">
							<image :src="teamObj.logo" class="bshalf" style="width: 70rpx;height: 70rpx;"></image>
							<view class="ml20">
								<view class="f26">{{teamObj.name || '球队名称'}}</view>
								<view class="f-y-c mt10">
									<view style="padding: 5rpx;font-size: 18rpx;background: #F4F4F4;">未提交</view>
									<view class="ml15 cf" style="font-size: 18rpx;padding: 5rpx;background: #099D4D;">
										报名进行中</view>
								</view>
							</view>
						</view>
						<u-icon @click="editInfo" name="edit-pen" size="16" color="#0F56B9"></u-icon>
					</view>
				</view>
			</view>
			<!-- // paymentStatus支付状态:1未支付，2已支付，3超时未支付，4超时后支付成功 5未支付关闭 -->
			<view class="mt40">
				<view class="f24 c6">教练</view>
				<view class="bs16 p3 bf mt15">
					<view class="f-s-c" v-for="(item,index) in listDefault.coachList" :key="index"
						:class="index==listDefault.coachList.length-1?'':'pb20 mb20 b-b'">
						<view class="f-y-c">
							<u-icon @click="delMan(item,'教练')" name="close-circle" class="mr20"
								v-if="item.paymentStatus==1"></u-icon>
							<image class="bshalf" v-if="item.logo" :src="item.logo" style="width: 70rpx;height: 70rpx;">
							</image>
							<image v-else src="/static/newYdsg/jiaolian.png" style="width: 70rpx;height: 70rpx;">
							</image>
							<text class="wei ml30">{{item.name||(index==0?'领队':'教练')}}</text>
							<text v-if="item.name" class="ml5">
								({{item.paymentStatus==1?'未支付':item.paymentStatus==2?'已支付':item.paymentStatus==3?'支付超时':
								item.paymentStatus==4?'已退款':item.paymentStatus==5?'申请退款中':item.paymentStatus==6?'审核通过':'未知状态'}})
							</text>
						</view>
						<view class="f-y-c" @click="goJoin(item,'教练',index)">
							<text class="mr20">{{item.addFlag == 1 ? '已加入' : '待加入'}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="mt40">
				<view class="f24 c6">球员（至少{{detailObj.minNum}}人，最多{{detailObj.maxNum}}人）</view>
				<view class="bs16 p3 bf mt15">
					<view class="f-s-c" :class="index==listDefault.playerList.length-1?'':'pb20 mb20 b-b'"
						v-for="(item,index) in listDefault.playerList" :key="index">
						<view class="f-y-c">
							<u-icon @click="delMan(item,'球员')" name="close-circle" class="mr20"
								v-if="item.paymentStatus==1"></u-icon>
							<image class="bshalf" v-if="item.logo" :src="item.logo" style="width: 70rpx;height: 70rpx;">
							</image>
							<image v-else src="/static/newYdsg/qiuyuan.png" style="width: 70rpx;height: 70rpx;"></image>
							<text class="wei ml30">{{item.name||'球员'}}</text>
							<text v-if="item.name" class="ml5">
								({{item.paymentStatus==1?'未支付':item.paymentStatus==2?'已支付':item.paymentStatus==3?'支付超时':
								item.paymentStatus==4?'已退款':item.paymentStatus==5?'申请退款中':item.paymentStatus==6?'审核通过':'未知状态'}})
							</text>
						</view>
						<view class="f-y-c" @click="goJoin(item,'球员',index)">
							<text class="mr20">{{item.addFlag == 1 ? '已加入' : '待加入'}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot-fixed-area bf p3" style="border-top: 1px solid #eee;">
			<!-- bm 域名展示 -->
			<view class="f-x-ad" style="width: 94%;" v-if="configBaseUrl=='http://bm.yundongshugen.com/api'">
				<view class="bs10 f-c cf p20" style="background: #0F56B9;width: 80%;" @click="goShareCopy">
					邀请参赛
				</view>
			</view>
			<!-- hz 域名展示 -->
			<view class="f-x-ad" style="width: 94%;" v-else>
				<view class="bs10 f-c cf p20" style="background: #0F56B9;width: 45%;" @click="goShareCopy">
					邀请参赛
				</view>
				<view class="bs10 f-c cf p20" style="background: #FA8C17;width: 45%;" @click="goPayAll">
					球队总付款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const $index = require('../../request/api/v1/index');
	const $URL = require('../../request/request');
	export default {
		data() {
			return {
				options1: [{
					text: '删除'
				}],
				detailObj: '',
				showMore: false, //false
				listDefault: { //本地数据
					coachList: [],
					playerList: [],
				},
				teamObj: '',
				contestId: '',
				configBaseUrl: ''
			};
		},
		onLoad(option) {
			this.configBaseUrl = $URL.getBaseUrl()
			this.contestId = option.contestId
			let userToken = localStorage.getItem("tokenValue") || ''
			if (!userToken) {
				const currentUrl = `/pages/business/matchDetail?contestId=${option.contestId}&teamId=${option.teamId}`
				localStorage.setItem("pagePrevPath", currentUrl);
			}
			this.getDetail(this.contestId)
			this.getteamDetail(option.teamId)
		},
		onShow() {
			// setTimeout(() => {
			// 	this.getList() //
			// }, 500)
		},
		methods: {
			getteamDetail(teamId) {
				$index.teamDetail({
					teamId
				}).then(res => {
					console.log('teamObj', res.data)
					this.teamObj = res.data
					this.getList()
				})
			},
			goPayAll() {
				$index.totalPlayerPay({
					id: this.teamObj.id,
					indexId: $URL.getBaseUrl() == 'http://bm.yundongshugen.com/api' ? 1 : 2
				}).then(res => {
					const payParams = res.data;
					console.log('获取支付参数成功', payParams);
					// 调用微信支付
					if (typeof WeixinJSBridge == "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(
									payParams),
								false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady(
								payParams));
							document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady(
								payParams));
						}
					} else {
						this.onBridgeReady(payParams);
					}
				})
			},
			onBridgeReady(payParams) {
				uni.hideLoading()
				let that = this
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: payParams.appId,
						timeStamp: payParams.timeStamp,
						nonceStr: payParams.nonceStr,
						package: payParams.packageValue,
						signType: payParams.signType,
						paySign: payParams.paySign
					},
					(res) => {
						console.log('res支付回调', res);
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							that.$u.toast('支付成功！')
							setTimeout(() => {
								that.getDetail(that.contestId)
								that.resetValue()
								that.getList()
							}, 1500);
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							console.log('用户取消支付');
						} else {
							console.log(`支付失败: ${res.err_msg}`);
						}
					}
				);
			},
			resetValue() {
				this.listDefault = { //本地数据
					coachList: [{
						name: '',
						logo: ''
					}, {
						name: '',
						logo: ''
					}],
					playerList: [],
				}
				for (let i = 1; i <= this.detailObj.maxNum; i++) {
					this.listDefault.playerList.push({
						name: '',
						logo: ''
					})
				}
			},
			delMan(item, type) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除该成员吗？',
					success: res => {
						if (res.confirm) {
							let apiStr = type == '教练' ? $index.deleteCoach : $index.deletePlayer
							apiStr({
								id: item.id
							}).then(res2 => {
								that.$u.toast('已删除')
								setTimeout(() => {
									that.resetValue()
									that.getList()
								}, 100)
							})
						}
					}
				});
			},
			goShareCopy() {
				let teamObj = JSON.stringify({
					id: this.teamObj.id,
					logo: this.teamObj.logo,
					name: this.teamObj.name
				})
				// 获取当前页面地址
				const currentUrl =
					`http://bm.yundongshugen.com/#/pages/business/matchDetail?contestId=${this.contestId}&teamId=${this.teamObj.id}`
				// 调用uni-app的剪贴板API
				uni.setClipboardData({
					data: currentUrl,
					success: () => {
						uni.showToast({
							title: '链接已复制，快去分享给他人吧~',
							icon: 'success'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
						console.error('复制失败:', err);
					}
				});
			},
			goJoin(item, type, index) {
				if (item.addFlag == 1 && item.paymentStatus == 2) {
					this.$u.toast('当前已加入并已支付，无法重复加入')
					return
				}
				let peopleId = item.id || ''
				let peopleParams = JSON.stringify(item)
				// paymentStatus支付状态:1未支付，2已支付，3超时未支付，4超时后支付成功 5未支付关闭
				uni.navigateTo({
					url: `/pages/business/joinUser?pageType=${type}&peopleParams=${peopleParams}&peopleId=${peopleId}&playerExpenses=${this.detailObj.playerExpenses}&coachExpenses=${this.detailObj.coachExpenses}&selectIndex=${index}&contestId=${this.detailObj.id}&teamId=${this.teamObj.id}`
				});
			},
			editInfo() {
				uni.navigateTo({
					url: '/pages/business/joinMatch?sourceType=matchDetail'
				});
			},
			getDetail(contestId) {
				$index.contestDetail({
					contestId //: 58,
				}).then(res => {
					this.detailObj = res.data;
					this.resetValue()
				});
			},
			getList() {
				// 分别获取教练 球员列表
				$index.coachList({
					teamId: this.teamObj.id
				}).then(res => {
					console.log('res.data', res.data);
					this.listDefault.coachList.forEach((item, index) => {
						if (res.data[index]) {
							let arr = Object.keys(res.data[index])
							arr.forEach(ss => {
								item[ss] = res.data[index][ss]
							})
						}
						// item.name = res.data[index].name || ''
						// item.logo = res.data[index].logo || ''
						// item.paymentStatus = res.data[index].paymentStatus || ''
						// item.payType = res.data[index].payType || ''
					});
					console.log('this.listDefault.coachList', this.listDefault.coachList);
				})
				$index.playerList({
					teamId: this.teamObj.id
				}).then(res => {
					this.listDefault.playerList.forEach((item, index) => {
						if (res.data[index]) {
							let arr = Object.keys(res.data[index])
							arr.forEach(ss => {
								item[ss] = res.data[index][ss]
							})
						}
					});
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.swipe-action {
		&__content {
			border-bottom: 3rpx solid #eee;
			padding: 6rpx 0;
		}
	}
</style>